<template>
    <div class="nb">
        <div class="dd">{{ $t('text.Employee.l12') }}</div>

        <div class="leftTop2" v-if="isLoad">
            <div class="df">
                <img class="img2" src="../../assets/images/icon.png" />
                <div class="items">
                    <RadioSelect :leftText="$t('text.Employee.l25')" :selectList="orgTreeList" searchKey="orgIds"
                        isShowTitle @returnData="setData" @clearData="clearData" isRange2>
                    </RadioSelect>
                </div>
            </div>
            <div class="df">
                <img class="img2" src="../../assets/images/icon.png" />
                <div class="time">
                    {{ $t('text.Employee.l26') }}
                    <el-date-picker v-model="time" type="month" :placeholder="$t('text.Employee.l26')"
                        style="width: 100px;margin-left: 10px;height: 23px;font-size: 12px;" value-format="YYYY-MM" />
                </div>
            </div>
        </div>
    </div>
    <div class="right">
        <div class="rightTop">
            <div></div>
            <TimePageNavList :timeNavList="timeNavList.data" :defaultClick="timeNavList.defaultClick" @returnData="setType">
            </TimePageNavList>
            <div class="out"><img class="outImg" src="../../assets/images/out.svg"><span>{{ $t('text.Employee.l7') }}</span>
            </div>
        </div>
        <div class="listContain">
            <div class="context" v-if="searchData.type == '0'">
                <div class="cTitle">
                    <span>{{ $t('text.Employee.l70') }}</span>
                    <span>{{ $t('text.Employee.l64') }}</span>
                    <span>{{ $t('text.Employee.l65') }}</span>
                    <span>{{ $t('text.Employee.l66') }}</span>
                    <span>{{ $t('text.Employee.l74') }}</span>
                    <span>{{ $t('text.Employee.l75') }}</span>
                </div>
                <div class="ov">
                    <div class="cTitle1" v-for="item of dataList" v-bind:key="item">
                        <span>{{ item.birthTime == null ? '-' : item.birthTime.split(" ")[0] }}</span>
                        <span>{{ item.realName == null ? '-' : item.realName }}</span>
                        <span>{{ item.jobName == null ? '-' : item.jobName }}</span>
                        <span>{{ item.orgName == null ? '-' : item.orgName }}</span>
                        <span>{{ item.entryTime == null ? '-' : item.entryTime.split(" ")[0] }}</span>
                        <span>{{ item.status == null ? '-' : item.status == '0' ? $t('text.Employee.l71') :
                            $t('text.Employee.l72')
                        }}</span>
                    </div>
                </div>
            </div>
            <div class="context" v-if="searchData.type == '1'">
                <div class="cTitle">
                    <span>{{ $t('text.Employee.l74') }}</span>
                    <span>{{ $t('text.Employee.l77') }}</span>
                    <span>{{ $t('text.Employee.l64') }}</span>
                    <span>{{ $t('text.Employee.l65') }}</span>
                    <span>{{ $t('text.Employee.l66') }}</span>
                </div>
                <div class="ov">
                    <div class="cTitle1" v-for="item of dataList" v-bind:key="item">
                        <span>{{ item.entryTime == null ? '-' : item.entryTime.split(" ")[0] }}</span>
                        <span>{{ item.entryTime == null ? '-' : getYear(item.entryTime) + '年' }}</span>
                        <span>{{ item.realName == null ? '-' : item.realName }}</span>
                        <span>{{ item.jobName == null ? '-' : item.jobName }}</span>
                        <span>{{ item.orgName == null ? '-' : item.orgName }}</span>
                    </div>
                </div>
            </div>

            <!--底部分页-->
            <div class="setPage">
                <el-pagination v-model:current-page="searchData.pageNo" v-model:page-size="searchData.pageSize"
                    :page-sizes="[10, 15, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>
    
<script>

import RadioSelect from '@/components/select/RadioSelect.vue';
import { userGetOrgTree, findByCare } from '../../http/api';
import TimePageNavList from '@/components/navigation/TimePageNavList.vue';

export default {
    components: {
        RadioSelect,
        TimePageNavList
    },
    props: {
    },
    data() {
        return {
            timeNavList: {
                defaultClick: this.$t('text.Employee.l8'),
                data: [this.$t('text.Employee.l8'), this.$t('text.Employee.l9')]
            },
            orgTreeList: [],
            searchData: {
                pageNo: 1,
                pageSize: 25,
                type: '0'
            },
            total: 0,
            isLoad: false,
            time: '',
            dataList: []
        }
    },
    mounted() {
        userGetOrgTree().then(res => {
            if (res !== undefined) {
                this.orgTreeList = res
                this.isLoad = true
                this.search()
                console.log(res)
            }
        }).catch()
    },
    methods: {

        getYear(givenDate) {
            const date = new Date(givenDate);
            const now = new Date();
            let diffYear = now.getFullYear() - date.getFullYear();
            if (now.getMonth() < date.getMonth() ||
                (now.getMonth() === date.getMonth() && now.getDate() < date.getDate())) {
                diffYear--;
            }
            return diffYear
        },

        setData(obj) {
            this.searchData = { ...this.searchData, ...obj }
            console.log(JSON.stringify(this.searchData))
        },
        clearData(obj) {
            const objKeys = Object.keys(obj);
            this.searchData = Object.keys(this.searchData).reduce((acc, key) => {
                if (!objKeys.includes(key)) {
                    acc[key] = this.searchData[key];
                }
                return acc;
            }, {});
            console.log(JSON.stringify(this.searchData))
        },
        setType(index) {
            let temp = JSON.parse(JSON.stringify(this.searchData));
            switch (index) {
                case 0: temp.type = '0'; this.searchData = temp; break;
                case 1: temp.type = '1'; this.searchData = temp; break;
            }
        },

        search() {
            findByCare(this.searchData).then(res => {
                if (res !== undefined) {
                    this.dataList = res.dataList
                    this.total = res.total
                    console.log(res)
                }
            }).catch()
        },

        handleSizeChange(val) {
            let temp = JSON.parse(JSON.stringify(this.searchData));
            temp.pageSize = val
            this.searchData = temp
        },
        handleCurrentChange(val) {
            let temp = JSON.parse(JSON.stringify(this.searchData));
            temp.pageNo = val
            this.searchData = temp
        }
    },
    watch: {
        searchData() {
            console.log(this.searchData)
            this.search()
        },
        time() {
            if (this.time == null) {
                this.clearData({ time: '' })
            } else {
                let obj = { time: this.time }
                this.searchData = { ...this.searchData, ...obj }
                console.log(this.searchData)
            }
        },
    },
    computed: {
    }

}
</script>
    
<style scoped>
.nb {
    min-width: 310px;
    padding: 15px;
    overflow: auto;
    background: white;
    margin-bottom: 30px;
    margin-right: 5px;
    box-shadow: 1px 10px 30px 4px #e9e9e9;
}

.dd {
    font-size: 18px;
    white-space: nowrap;
    font-weight: 600;
    color: #7a8df1;
    text-align: left;
}

.leftTop2 {
    border: 1px solid #cecece;
    border-radius: 5px;
    padding: 10px;
    margin-top: 10px;
    position: relative;
}

.df {
    display: flex;
    align-items: center;
    margin-top: 2px;
    margin-bottom: 2px;
}

.img2 {
    width: 22px;
    height: 22px;
}

.items {
    margin-left: 15px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 12px;
    color: gray;
    border-bottom: 1px solid rgb(224, 224, 224);
    width: 100%;
}

.time {
    margin-left: 15px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 12px;
    color: gray;
    border-bottom: 1px solid rgb(224, 224, 224);
    width: 100%;
    display: flex;
    align-items: center;
    white-space: nowrap;
    justify-content: space-between;
}

.right {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #f8f8f8;
}

.rightTop {
    display: flex;
    justify-content: space-between;
    padding-right: 20px;
    padding-top: 15px;
    color: #6698ff;
    padding-left: 30px;
}

.out {
    display: flex;
    align-items: center;
    font-size: 14px;
}

.outImg {
    width: 20px;
    height: 20px;
    padding-right: 5px;
}

.context {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    background: white;
    position: relative;
}

.listContain {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    background: white;
    margin: 10px 30px 30px 25px;
    position: relative;
    box-shadow: 1px 5px 10px 4px #e9e9e9;
}


.cTitle {
    display: flex;
    font-size: 14px;
    color: #555;
    border-bottom: 1px solid #ddd;
    margin: 10px 15px;
    padding-bottom: 10px;
}

.cTitle1 {
    display: flex;
    font-size: 14px;
    color: #555;
    border-bottom: 1px solid #ddd;
    margin: 10px 15px;
    padding-bottom: 10px;
}

.ov {
    overflow: auto;
}

span {
    flex: 1;
}

.setPage {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #eee;
    padding: 10px
}
</style>